<template>
  <div>
    <ConditionLayout :formId="formId" v-if="type==='condition'"></ConditionLayout>
    <a-row v-else :gutter="10">
      <a-col :span="19">
        <div class="scroll" :style="{height:`${winHeight-220+(isIfm?80:0)}px`,border:'solid 1px #e6e6e6',padding:`${layout.视图边距}px`}">
          <div class="wfull flx-c fs24 fw8 mb15" v-if="showTitle">{{ title }}</div>
          <a-row :gutter="layout.左右间距">
            <template v-for="(c,i) in columns" >
              <a-col v-if="c.divider&&c.divider.length>0" :span="24" :key="`column_bar${i}`">
                <a-divider>{{ c.divider }}</a-divider>
              </a-col>
              <a-col :offset="c.offset" :span="c.span" :key="`column${i}`">
                <div class="diy-row" @click="toUpdateColumn(c)" :class="layout.标签对齐==='top'?'':'flx-s'" :style="{marginBottom:`${layout.上下间距}px`}">
                  <div v-if="c.showLabel" :class="layout.标签对齐==='right'?'tar':'tal'" class="mr10" :style="{width:`${layout.标签宽度}px`}">
                    <span>{{ c.name }}</span>
                  </div>
                  <div class="flx-1" :class="layout.标签对齐==='top'?'mt10':''">
                    <template v-if="c.showVal">
                      <div class="flx-c">
                        <div v-html="c.defaultVal" v-if="c.compType==='富文本'"></div>
                        <div v-else>{{ c.defaultVal }}</div>
                      </div>
                    </template>
                    <template v-else>
                      <ZgInput v-if="c.compType==='单行文本'"></ZgInput>
                      <ZgNumber v-if="c.compType==='整数'"></ZgNumber>
                      <ZgNumber v-if="c.compType==='浮点数'" isFloat></ZgNumber>
                      <ZgCheckbox v-if="c.compType==='单选框'"></ZgCheckbox>
                      <ZgSelectMany v-if="c.compType==='多选'" :code="c.extra.字典类型"></ZgSelectMany>
                      <ZgDatePicker v-if="c.compType==='日期'"></ZgDatePicker>
                      <ZgDateTimePicker v-if="c.compType==='日期时间'"></ZgDateTimePicker>
                      <ZgTimePicker v-if="c.compType==='时间'"></ZgTimePicker>
                      <ZgDictionary v-if="c.compType==='字典'" :code="c.extra.字典类型"></ZgDictionary>
                      <ZgEnum v-if="c.compType==='枚举'" :code="c.extra.枚举编码"></ZgEnum>
                      <ZgSwitch v-if="c.compType==='开关'"></ZgSwitch>
                      <ZgTextarea v-if="c.compType==='多行文本'" :rows="parseInt(c.extra.行数)"></ZgTextarea>
                      <ZgTinymce v-if="c.compType==='富文本'" :height="parseInt(c.extra.高度)"></ZgTinymce>
                      <ZgUpImg v-if="c.compType==='图片'"></ZgUpImg>
                    </template>
                  </div>
                  <div v-if="c.unit" class="ml10">{{ c.unit }}</div>
                </div>
              </a-col>
            </template>
          </a-row>
        </div>
      </a-col>
      <a-col :span="5">
        <a-card size="small">
          <div slot="title">
            <a-tooltip title="基础信息">
              <a-button :type="tab===1?'primary':''" @click="tab=1" shape="circle" class="mr10">
                <i class="fa fa-info"/>
              </a-button>
            </a-tooltip>
            <a-tooltip title="选择字段">
              <a-button :type="tab===2?'primary':''" @click="tab=2" shape="circle" class="mr10">
                <i class="fa fa-th-list"/>
              </a-button>
            </a-tooltip>
            <a-tooltip title="设置字段">
              <a-button :type="tab===3?'primary':''" @click="tab=3" shape="circle" class="mr10">
                <i class="fa fa-pencil"/>
              </a-button>
            </a-tooltip>
            <a-tooltip title="设置布局">
              <a-button :type="tab===4?'primary':''" @click="tab=4" shape="circle" class="mr10">
                <i class="fa fa-columns"/>
              </a-button>
            </a-tooltip>
            <a-tooltip v-if="type==='form'" title="设置选择器">
              <a-button :type="tab===5?'primary':''" @click="tab=5" shape="circle" class="mr10" >
                <i class="fa fa-list-alt"/>
              </a-button>
            </a-tooltip>
            <a-tooltip v-if="type==='form'" title="设置按钮">
              <a-button :type="tab===6?'primary':''" @click="tab=6" shape="circle" >
                <i class="fa fa-cogs"/>
              </a-button>
            </a-tooltip>
          </div>
          <div class="scroll pd10 " :style="{margin:'-10px',height:`${winHeight-326+(isIfm?80:0)}px`}">
            <div v-if="tab===1">
              <Info ref="info" :viewId="viewId" @ok="onInfoOk"></Info>
            </div>
            <div v-if="tab===2">
              <draggable
                v-model="columns"
                handle=".sortHandler"
                chosenClass="chosen"
                forceFallback="true"
                group="module"
                animation="1000"
                @start="onStart"
                @end="onEnd">
                <transition-group>
                  <a-tag
                    color="blue"
                    @dblclick.native="removeColumn(i)"
                    class="wfull mb10 cpt pd5"
                    v-for="(c,i) in columns"
                    :key="c.id">
                    <i class="fa fa-arrows sortHandler cpt mr10"/>{{ c.name }}
                  </a-tag>
                </transition-group>
              </draggable>
              <a-tag
                @dblclick.native="addColumn(c)"
                v-for="c in extraColumnList"
                :key="c.id"
                class="wfull mb10 cpt pd5"
                color="red">
                <i class="fa fa-minus-circle mr10"/>{{ c.name }}
              </a-tag>
            </div>
            <div v-if="tab===3">
              <ColumnInfo ref="columnInfo" :layoutId="layoutId" :layoutName="layoutName" @ok="onLayoutColumnOk"></ColumnInfo>
            </div>
            <div v-if="tab===4">
              <div class="flx-s mb10">
                <div class="w120 mr5">视图边距</div>
                <ZgNumber v-model="layout.视图边距"></ZgNumber>
              </div>
              <div class="flx-s mb10">
                <div class="w120 mr5">标签宽度</div>
                <ZgNumber v-model="layout.标签宽度"></ZgNumber>
              </div>
              <div class="flx-s mb10">
                <div class="w120 mr5">标签对齐</div>
                <ZgSelect v-model="layout.标签对齐" :options="[{value:'left',label:'靠左'},{value:'right',label:'靠右'},{value:'top',label:'靠上'}]"></ZgSelect>
              </div>
              <div class="flx-s mb10">
                <div class="w120 mr5">左右间距</div>
                <ZgNumber v-model="layout.左右间距"></ZgNumber>
              </div>
              <div class="flx-s mb10">
                <div class="w120 mr5">上下间距</div>
                <ZgNumber v-model="layout.上下间距"></ZgNumber>
              </div>
            </div>
            <div v-if="tab===5">
              <div class="flx-s form-selection" v-for="i in 24" :key="`data_select_${i}`">
                <ZgCheckbox><span class="name">某某数据选择器</span></ZgCheckbox>
              </div>
            </div>
            <div v-if="tab===6">
              <div class="flx-s form-btn" v-for="i in 24" :key="`btn_${i}`">
                <ZgCheckbox><span class="name">某某按钮</span></ZgCheckbox>
              </div>
            </div>
          </div>
          <div class="mt20">
            <ZgButton v-if="tab===1" block icon="save" @click="saveInfo">保存视图信息</ZgButton>
            <ZgButton v-if="tab===2" block icon="save" @click="saveFormLayout('字段')">保存字段</ZgButton>
            <ZgButton v-if="tab===3" block icon="save" @click="saveColumnInfo">保存字段信息</ZgButton>
            <div class="flx-c" v-if="tab===4">
              <a-button @click="search" class="mr10">刷新</a-button>
              <a-button @click="reset" class="mr10">重置</a-button>
              <a-button type="primary" @click="saveFormLayout('布局')">保存</a-button>
            </div>
            <ZgButton v-if="tab===5" block icon="save" @click="saveDataSelect">保存数据选择器设置</ZgButton>
            <ZgButton v-if="tab===6" block icon="save" @click="saveButton">保存按钮设置</ZgButton>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import { getExtra, getLayout } from '@/views/autoform/column/js/constant'
import Info from './Info'
import ColumnInfo from './ColumnInfo'
import ConditionLayout from './ConditionLayout'
export default {
  components: {
    draggable, Info, ColumnInfo, ConditionLayout
  },
  props: {
    formId: {
      type: String,
      default: ''
    },
    viewId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      title: '',
      showTitle: '',
      type: '',
      tab: 1,
      saving: false,
      allColumns: [],
      columns: [],
      layoutId: '',
      layoutName: '',
      extra: getExtra(),
      layout: getLayout()
    }
  },
  computed: {
    extraColumnList () {
      return this.allColumns.filter(t => {
        return !this.columns.some(x => {
          return x.id === t.id
        })
      })
    }
  },
  watch: {
    viewId () {
      this.searchAllColumn()
      this.search()
    }
  },
  mounted () {
    this.searchAllColumn()
    this.search()
  },
  methods: {
    toUpdateColumn (c) {
      this.tab = 3
      this.layoutId = c.layoutId
      this.layoutName = c.name
    },
    onInfoOk (obj) {
      this.title = obj.title
      this.showTitle = obj.showTitle
    },
    onLayoutColumnOk (obj) {
      const arr = this.columns.filter(t => {
        return t.layoutId === this.layoutId
      })
      if (arr.length > 0) {
        arr[0].span = obj.span
        arr[0].offset = obj.offset
        arr[0].divider = obj.divider
        arr[0].unit = obj.unit
        arr[0].showLabel = obj.showLabel
        arr[0].showVal = obj.showVal
        arr[0].isHide = obj.isHide
      }
    },
    searchAllColumn () {
      this.$http.get('/zg-autoform/zxb/view/listAllColumn', { viewId: this.viewId }, data => {
        this.allColumns = data
      })
    },
    search () {
      this.$http.get('/zg-autoform/zxb/view/findById', { id: this.viewId }, data => {
        this.title = data.title
        this.type = data.type
        this.showTitle = data.showTitle
        this.layout = JSON.parse(data.layout)
        this.columns = data.columns.map((t, i) => {
          try {
            t.extra = Object.assign({}, this.extra, JSON.parse(t.extra))
          } catch (e) {
            t.extra = Object.assign({}, this.extra)
          }
          t.span = t.span || 12
          t.offset = t.offset || 0
          t.sort = t.sort || (i + 1)
          return t
        })
        this.$nextTick(() => {
          this.columns.sort((a, b) => {
            return a.sort - b.sort
          })
        })
      })
    },
    reset () {
      this.layout = getLayout()
    },
    saveFormLayout (title) {
      const columns = this.columns.map(t => {
        return {
          columnId: t.id,
          columnCode: t.code,
          columnType: t.compType,
          span: t.span,
          offset: t.offset,
          sort: t.sort
        }
      })
      const param = {
        viewId: this.viewId,
        layout: JSON.stringify(this.layout),
        columnList: columns
      }
      this.$http.post('/zg-autoform/zxb/view/updateLayout', param, () => {
        this.$success({ title: title + '保存成功' })
        this.search()
      })
    },
    onStart () {},
    onEnd () {
      this.saving = true
      const param = this.columns.map((t, i) => {
        t.sort = i + 1
        return t.id + ':' + this.viewId + ':' + (i + 1)
      })
      this.$http.post('/zg-autoform/zxb/view/sortColumn', param, (count) => {
        this.$success({ title: `字段排序成功,更改${count}条数据` })
        this.saving = false
      })
    },
    removeColumn (i) {
      this.columns.splice(i, 1)
    },
    addColumn (t) {
      try {
        t.extra = Object.assign({}, this.extra, JSON.parse(t.extra))
      } catch (e) {
        t.extra = Object.assign({}, this.extra)
      }
      t.span = 12
      t.offset = 0
      t.sort = 0
      t.divider = ''
      t.unit = ''
      t.showLabel = true
      t.showVal = false
      t.isHide = false
      this.columns.push(t)
    },
    // 保存信息
    saveInfo () {
      this.$refs.info.save()
    },
    // 保存字段信息
    saveColumnInfo () {
      this.$refs.columnInfo.save()
    },
    saveDataSelect () {

    },
    saveButton () {}
  }
}
</script>

<style lang="scss" scoped>
.chosen{
  border:solid 1px #096daf;
  background:#096daf;
  color:#fff;
}
.form-btn,.form-selection{
  padding:10px 20px;
  border-radius:3px;
  margin-bottom:10px;
  cursor:pointer;
  background:#f2f2f2;
  &:hover{
    background:#40a9ff;
    .name{
      color:#fff;
    }
  }
}
.diy-row{
  padding:10px;
  &:hover{
    cursor:pointer;
    background:#f2f2f2;
  }
}
</style>
